<template>
  <lay-layer v-model="visible" maxmin resize>内容</lay-layer>
  <button @click="onChangeVisible">组件</button>
  <button @click="openModal">函数</button>
  <button @click="close">关闭</button>
  <button @click="closeAll">关闭全部</button>
  <button @click="openMsg">普通消息</button>
  <button type="button" @click="openIframe">iframe</button>
</template>


<script setup>
import { ref, h } from "vue";
import { LayLayer, layer } from "../../../src/index";

const visible = ref(false);

const onChangeVisible = () => {
  visible.value = true;
}

var instance = null;

const openModal = () => {
  instance = layer.open({
    content: "内容",
    area: ['500px','500px'],
    shade: false,
    maxmin: true
  })
}

const openMsg = () => {
  layer.msg("普通消息",{icon:2, time: 100000})
}

const close = () => {
  layer.close(instance)
}

const closeAll = () => {
  layer.closeAll()
}
const openIframe = function () {
   layer.open({
    type: 2,
    title: "标题",
    maxmin: true,
    resize: true,
    content: "https://finalsummer.gitee.io/layervue/",
  });
};
</script>


